<template>
  <view class="container">
    <view class="debug-content">
      <text class="title">碰撞监控调试页面</text>
      
      <view class="status-section">
        <view class="status-item">
          <text class="label">当前用户ID:</text>
          <text class="value">{{ userId }}</text>
        </view>
        
        <view class="status-item">
          <text class="label">WebSocket状态:</text>
          <text class="value" :class="{ 'connected': isConnected, 'disconnected': !isConnected }">
            {{ isConnected ? '已连接' : '未连接' }}
          </text>
        </view>
      </view>
      
      <view class="location-section">
        <text class="section-title">位置信息</text>
        <view class="status-item">
          <text class="label">经度:</text>
          <text class="value">{{ locationInfo.longitude || '获取中...' }}</text>
        </view>
        <view class="status-item">
          <text class="label">纬度:</text>
          <text class="value">{{ locationInfo.latitude || '获取中...' }}</text>
        </view>
        <view class="status-item">
          <text class="label">精度:</text>
          <text class="value">{{ locationInfo.accuracy || '获取中...' }}米</text>
        </view>
        <view class="status-item">
          <text class="label">最近更新:</text>
          <text class="value">{{ lastUpdate || '未更新' }}</text>
        </view>
      </view>
      
      <view class="action-section">
        <button class="action-btn" @click="refreshLocation">刷新位置</button>
        <button class="action-btn" @click="reconnectWebSocket">重连WebSocket</button>
      </view>
      
      <view class="log-section">
        <text class="section-title">日志</text>
        <scroll-view class="log-content" scroll-y>
          <text v-for="(log, index) in logs" :key="index" class="log-item">{{ log }}</text>
          <view v-if="logs.length === 0" class="empty-log">
            <text>暂无日志</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import locationService from './locationService.js';

export default {
  name: 'MonitorDebug',
  data() {
    return {
      userId: '',
      isConnected: false,
      locationInfo: {
        longitude: null,
        latitude: null,
        accuracy: null
      },
      lastUpdate: '',
      logs: [],
      checkTimer: null
    }
  },
  onLoad() {
    // 加载用户ID
    this.loadUserId();
    
    // 添加日志记录
    this.addLog('页面加载完成');
    
    // 启动定期检查
    this.startPeriodicCheck();
  },
  onShow() {
    // 刷新状态
    this.refreshStatus();
    this.addLog('页面显示，刷新状态');
  },
  onUnload() {
    // 清除定时器
    if (this.checkTimer) {
      clearInterval(this.checkTimer);
    }
  },
  methods: {
    // 加载用户ID
    loadUserId() {
      this.userId = uni.getStorageSync('userId') || '1';
      this.addLog(`加载用户ID: ${this.userId}`);
    },
    
    // 刷新位置信息
    refreshLocation() {
      this.addLog('正在获取位置...');
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.locationInfo.longitude = res.longitude;
          this.locationInfo.latitude = res.latitude;
          this.locationInfo.accuracy = res.accuracy;
          this.lastUpdate = new Date().toLocaleTimeString();
          this.addLog(`位置更新成功：${res.longitude}, ${res.latitude}`);
          
          // 手动发送一次位置
          locationService.sendCurrentLocation();
          this.addLog('位置数据已发送');
        },
        fail: (err) => {
          this.addLog(`获取位置失败: ${JSON.stringify(err)}`);
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 重连WebSocket
    reconnectWebSocket() {
      this.addLog('正在重连WebSocket...');
      locationService.reconnect();
    },
    
    // 刷新连接状态
    refreshStatus() {
      this.isConnected = locationService.isConnected();
      this.loadUserId();
    },
    
    // 添加日志
    addLog(message) {
      const timestamp = new Date().toLocaleTimeString();
      this.logs.unshift(`[${timestamp}] ${message}`);
      
      // 限制日志数量
      if (this.logs.length > 100) {
        this.logs = this.logs.slice(0, 100);
      }
    },
    
    // 启动定期检查
    startPeriodicCheck() {
      this.checkTimer = setInterval(() => {
        this.refreshStatus();
      }, 3000);
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  height: 100vh;
  background-color: #f8f8f8;
}

.debug-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  text-align: center;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
}

.status-section, .location-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.status-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.label {
  color: #666;
  font-size: 28rpx;
}

.value {
  color: #333;
  font-size: 28rpx;
  font-weight: bold;
}

.connected {
  color: #07c160;
}

.disconnected {
  color: #ff4d4f;
}

.action-section {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  margin: 0 10rpx;
}

.action-btn:first-child {
  margin-left: 0;
}

.action-btn:last-child {
  margin-right: 0;
}

.log-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.log-content {
  flex: 1;
  height: 500rpx;
}

.log-item {
  font-size: 24rpx;
  color: #333;
  padding: 6rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  display: block;
}

.empty-log {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.empty-log text {
  color: #999;
  font-size: 28rpx;
}
</style> 